<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;font-family: "microsoft yahei";}
			.main{position: relative; border: 1px solid #000;height: 280px;width: 400px;margin: 30px auto;overflow: hidden;}
			.wrap{position: absolute;width: 2000px;height: 280px;top: 0px;}
			.wrap .inner-wrap{float: left;width: 400px;height: 100%;}
			/* 上下一张 */
			.prev, .next{position: absolute;top: 100px; color: #FFFFFF;font-size: 30px;cursor: pointer;}
			.prev{left: 10px;}
			.next{right: 10px;}
			/* 背景颜色 */
			.red{background: #D1D1D1;}
			.green{background: #B7B7B7;}
			.black{background: #9B9B9B;}
			.blue{background: #7E7E7E;}
			.brown{background: #404040;}
			/* buttons */
			.buttons{position:absolute;right: 70px;bottom: 20px;}
			.buttons span{color: #FFFFFF;display: inline-block;width: 25px;height: 25px;text-align: center;line-height: 25px;background: rgba(0,0,0,0.6);box-shadow: 0px 3px 5px #000;
			border-radius: 100%;font-size: 13px;margin-left: 5px;}
			.buttons span.active{background: rgba(255,0,0,0.6);}            
		</style>
	</head>
	<body>
		<div class="main">
			<div class="wrap" style="left:0;">
				<div class="inner-wrap red"></div>
				<div class="inner-wrap green"></div>
				<div class="inner-wrap black"></div>
				<div class="inner-wrap blue"></div>
				<div class="inner-wrap brown"></div>
			</div>
			<span class="prev" onclick="wrapFun('prev')"><</span>
			<span class="next" onclick="wrapFun('next')">></span>
			<div class="buttons">
				<span class="active">1</span>
				<span>2</span>
				<span>3</span>
				<span>4</span>
				<span>5</span>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var main = document.querySelector('.main');
		var wrap = document.querySelector('.wrap');
		var buttonsSpan = document.querySelector('.buttons').children;
		// 每张图片的宽度
		var innerWrapWidth = 400;
		// wrap容器的宽度
		var wrapWidth = 2000;
		// 图片总数
		var imgNum = 5;
		// 当前图片的index
		var index = 0;
		// 点击按钮切换图片prev=上一张，next=下一张
		function wrapFun (param) {
			// 获取当前left
			var left = parseInt(wrap.style.left)
			var newLeft;
			if (param == 'prev') {
				if (left == 0) {
					newLeft = -wrapWidth + innerWrapWidth;
					index = imgNum - 1;
				} else {
					newLeft = left + innerWrapWidth;
					index--;
				}
			} else if (param == 'next') {
				if (left == (-wrapWidth + innerWrapWidth)) {
					newLeft = 0;
					index = 0;
				} else {
					newLeft = left - innerWrapWidth;
					index++;
				}
			}
			wrap.style.left = newLeft + 'px';
			selectButtons ();
		}
		// 自动播放
		var timer = null;
		function autoPlay () {
			timer = setInterval(function () {
				wrapFun ('next')
			}, 1000)
		}
		autoPlay();
		// 鼠标移入移出状态
		main.onmouseenter = function () {
			clearInterval(timer);
			
		}
		main.onmouseleave = function () {
			autoPlay();
		}
		// buttons选中状态
		function selectButtons () {
			for (var i = 0; i < buttonsSpan.length; i++) {
				buttonsSpan[i].className = ''
			}
			buttonsSpan[index].className = 'active'
		}
		
	</script>
</html>
